<template>
  <ion-page>
    <ion-header class="ion-no-border modern-header">
      <ion-toolbar class="gradient-toolbar">
        <ion-title class="page-title">个人中心</ion-title>
      </ion-toolbar>
    </ion-header>
    
    <ion-content :fullscreen="true" class="modern-content">
      <!-- 用户信息卡片 -->
      <div class="user-card-container">
        <div class="user-card glass-effect" v-show="refss">
          <div class="user-info">
            <div v-if="app.config.globalProperties.$currentUser != null" class="user-logged-in">
              <div class="avatar-container">
                <img src="../../public/assets/images/14.jpg" class="user-avatar" />
                <div class="avatar-badge">
                  <ion-icon name="checkmark-outline" class="badge-icon"></ion-icon>
                </div>
              </div>
              <div class="user-details">
                <div class="user-name">{{ app.config.globalProperties.$currentUser.realname }}</div>
                <div class="user-status">活跃读者</div>
                <div class="user-stats">
                  <div class="stat-item">
                    <span class="stat-number">{{ Math.floor(Math.random() * 50) + 10 }}</span>
                    <span class="stat-label">已借阅</span>
                  </div>
                  <div class="stat-divider"></div>
                  <div class="stat-item">
                    <span class="stat-number">{{ Math.floor(Math.random() * 20) + 5 }}</span>
                    <span class="stat-label">收藏</span>
                  </div>
                </div>
              </div>
            </div>
            <div v-else class="user-not-logged">
              <div class="avatar-container">
                <img src="../../public/assets/images/12.svg" class="user-avatar guest-avatar" />
              </div>
              <div class="login-prompt">
                <div class="prompt-text">登录后享受更多功能</div>
                <ion-button 
                  fill="solid" 
                  color="primary" 
                  class="login-button"
                  @click="() => router.push('/login')"
                >
                  立即登录
                </ion-button>
              </div>
            </div>
          </div>
          <div v-if="app.config.globalProperties.$currentUser != null" class="settings-icon" @click="() => router.push('/setting')">
            <ion-icon name="settings-outline" class="settings-btn"></ion-icon>
          </div>
        </div>
      </div>

      <!-- 快捷功能卡片 -->
      <ion-card class="features-card fade-in">
        <ion-card-content class="features-content">
          <div class="features-grid">
            <div class="feature-item">
              <div class="feature-icon-container sign-in">
                <ion-icon name="calendar-outline" class="feature-icon"></ion-icon>
              </div>
              <span class="feature-label">签到</span>
            </div>
            <div class="feature-item">
              <div class="feature-icon-container reading">
                <ion-icon name="library-outline" class="feature-icon"></ion-icon>
              </div>
              <span class="feature-label">阅历</span>
            </div>
            <div class="feature-item">
              <div class="feature-icon-container cart">
                <ion-icon name="bag-outline" class="feature-icon"></ion-icon>
              </div>
              <span class="feature-label">购物车</span>
            </div>
            <div class="feature-item">
              <div class="feature-icon-container message">
                <ion-icon name="chatbubble-outline" class="feature-icon"></ion-icon>
              </div>
              <span class="feature-label">消息</span>
            </div>
          </div>
        </ion-card-content>
      </ion-card>

      <!-- 功能菜单卡片 -->
      <ion-card class="menu-card fade-in">
        <ion-card-content class="menu-content">
          <div class="menu-item" @click="goBorrow">
            <div class="menu-left">
              <div class="menu-icon-container borrow">
                <ion-icon name="book-outline" class="menu-icon"></ion-icon>
              </div>
              <div class="menu-text">
                <div class="menu-title">我的借阅</div>
                <div class="menu-subtitle">查看借阅记录和状态</div>
              </div>
            </div>
            <ion-icon name="chevron-forward-outline" class="menu-arrow"></ion-icon>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-item" @click="goPassword">
            <div class="menu-left">
              <div class="menu-icon-container password">
                <ion-icon name="lock-closed-outline" class="menu-icon"></ion-icon>
              </div>
              <div class="menu-text">
                <div class="menu-title">修改密码</div>
                <div class="menu-subtitle">保护账户安全</div>
              </div>
            </div>
            <ion-icon name="chevron-forward-outline" class="menu-arrow"></ion-icon>
          </div>
          
          <div class="menu-divider"></div>
          
          <div class="menu-item" @click="goPhone">
            <div class="menu-left">
              <div class="menu-icon-container phone">
                <ion-icon name="call-outline" class="menu-icon"></ion-icon>
              </div>
              <div class="menu-text">
                <div class="menu-title">修改联系方式</div>
                <div class="menu-subtitle">更新个人信息</div>
              </div>
            </div>
            <ion-icon name="chevron-forward-outline" class="menu-arrow"></ion-icon>
          </div>
        </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';
import { useRouter } from 'vue-router';
import app from "@/main"
import {
  IonHeader,
  IonToolbar,
  IonTitle,
  IonPage,
  IonCard,
  IonIcon,
  IonButton,
  IonCardContent,
  IonContent,
} from '@ionic/vue';

export default defineComponent({
  name: 'MyPage',
  components: {
    IonHeader,
    IonToolbar,
    IonTitle,
    IonPage,
    IonCard,
    IonIcon,
    IonButton,
    IonCardContent,
    IonContent,
  },
  data() {
    return {
      app,
      refss: inject('refss')
    }
  },
  methods: {
    goBorrow() {
      if (app.config.globalProperties.$currentUser != null) {
        this.router.push('/tabs/borrow');
      } else {
        this.router.push('/login');
      }
    },
    goPassword() {
      if (app.config.globalProperties.$currentUser != null) {
        this.router.push('/tabs/password');
      } else {
        this.router.push('/login');
      }
    },
    goPhone() {
      if (app.config.globalProperties.$currentUser != null) {
        this.router.push('/tabs/phone');
      } else {
        this.router.push('/login');
      }
    }
  },
  setup() {
    const router = useRouter();
    return { router };
  },
});
</script>

<style lang="less" scoped>
.modern-header {
  background: transparent;
}

.gradient-toolbar {
  --background: linear-gradient(135deg, #4f46e5, #06b6d4);
  --color: white;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
}

.page-title {
  text-align: center;
  font-weight: 700;
}

.modern-content {
  --background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

.user-card-container {
  padding: 16px;
  margin-top: -20px;
  position: relative;
  z-index: 10;
}

.user-card {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info {
  flex: 1;
}

.user-logged-in {
  display: flex;
  align-items: center;
  gap: 16px;
}

.avatar-container {
  position: relative;
}

.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.guest-avatar {
  opacity: 0.6;
}

.avatar-badge {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: #10b981;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

.badge-icon {
  color: white;
  font-size: 14px;
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 4px;
}

.user-status {
  font-size: 0.875rem;
  color: #10b981;
  font-weight: 500;
  margin-bottom: 12px;
}

.user-stats {
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-number {
  font-size: 1.25rem;
  font-weight: 700;
  color: #4f46e5;
}

.stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 2px;
}

.stat-divider {
  width: 1px;
  height: 32px;
  background: #e5e7eb;
}

.user-not-logged {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.login-prompt {
  flex: 1;
}

.prompt-text {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 12px;
}

.login-button {
  --border-radius: 12px;
  font-weight: 600;
  height: 44px;
}

.settings-icon {
  padding: 12px;
  border-radius: 12px;
  background: rgba(79, 70, 229, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(79, 70, 229, 0.2);
    transform: scale(1.05);
  }
}

.settings-btn {
  font-size: 24px;
  color: #4f46e5;
}

.features-card, .menu-card {
  margin: 0 16px 16px 16px;
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.95);
}

.features-content {
  padding: 20px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.feature-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform 0.3s ease;

  &:hover {
    transform: translateY(-2px);
  }
}

.feature-icon-container {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.sign-in {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
  }
  
  &.reading {
    background: linear-gradient(135deg, #10b981, #34d399);
  }
  
  &.cart {
    background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  }
  
  &.message {
    background: linear-gradient(135deg, #ef4444, #f87171);
  }
}

.feature-icon {
  color: white;
  font-size: 24px;
}

.feature-label {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
}

.menu-content {
  padding: 0;
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  cursor: pointer;
  transition: background 0.3s ease;

  &:hover {
    background: rgba(79, 70, 229, 0.05);
  }
}

.menu-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.menu-icon-container {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &.borrow {
    background: rgba(79, 70, 229, 0.1);
  }
  
  &.password {
    background: rgba(239, 68, 68, 0.1);
  }
  
  &.phone {
    background: rgba(16, 185, 129, 0.1);
  }
}

.menu-icon {
  font-size: 20px;
  
  .borrow & {
    color: #4f46e5;
  }
  
  .password & {
    color: #ef4444;
  }
  
  .phone & {
    color: #10b981;
  }
}

.menu-text {
  flex: 1;
}

.menu-title {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
}

.menu-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
}

.menu-arrow {
  font-size: 20px;
  color: #9ca3af;
}

.menu-divider {
  height: 1px;
  background: #f3f4f6;
  margin: 0 20px;
}

@media (prefers-color-scheme: dark) {
  .gradient-toolbar {
    --background: linear-gradient(135deg, #3730a3, #0891b2);
  }

  .modern-content {
    --background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  }

  .user-card, .features-card, .menu-card {
    background: rgba(30, 41, 59, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .user-name, .menu-title {
    color: #f1f5f9;
  }

  .feature-label {
    color: #e2e8f0;
  }

  .menu-subtitle {
    color: #94a3b8;
  }

  .menu-divider {
    background: #475569;
  }
}

@media (max-width: 768px) {
  .user-logged-in {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .user-stats {
    justify-content: center;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
</style>
